<template>
	<view>
		<view class="search">
			<input type="text" placeholder="请输入歌名..." class="txt" v-model="iptvalue">
			<view class="btn" @click="search">搜索</view>
		</view>
		<view class="searchhot" v-if="isok">
			<view class="songitem" v-for="(item, index) in songlist" :key="index" @click="song(item.id)">
				<view class="left">
					<image class="img" :src="item.artists[0].img1v1Url" lazy-load="ture"></image>
				</view>
				<view class="center">
					<view class="title">{{ item.name }}</view>
					<view class="info">{{ item.artists[0].name }} - {{ item.album.name }}</view>
				</view>
				<view class="right">
					播放
				</view>
			</view>
		</view>
		<view class="searchsonglist" v-else>
			<view class="songitem" v-for="(item, index) in detaillist" :key="index" @click="songhot(item.searchWord)">
				<view class="searchWord">
					<!-- <image :src="item.iconUrl" mode=""></image> -->
					{{ item.searchWord }}
				</view>
				<view class="content">
					{{ item.content }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				songlist: [],
				detaillist: [],
				isok: false,
				iptvalue: ''
			}
		},
		filters:{
			forartists(value){
				const arr =value.map(item=>item.name)
				return arr.join('/')
			}
		},
		methods: {
			getdetail(){
				uni.request({
					url:`http://134.175.83.178:3000/search/hot/detail`,
					method:'GET',
					success: (res) => {
						// console.log(res)
						const { data } = res
						this.detaillist = data.data
					}
				})
			},
			search(){
				uni.request({
					url:`http://134.175.83.178:3000/search?keywords=${this.iptvalue}`,
					method:'GET',
					success: (res) => {
						const { data } = res
						// console.log(data)
						this.songlist = data.result.songs
					}
				})
				this.isok = true
			},
			song(id){
				// console.log(id)
				uni.navigateTo({
					url: `/pages/song/song?id=${id}`
				});
			},
			songhot(value){
				uni.request({
					url:`http://134.175.83.178:3000/search?keywords=${value}`,
					method:'GET',
					success: (res) => {
						// console.log(res)
						const { data } = res
						this.songlist = data.result.songs
					}
				})
				this.isok = true
			}
		},
		onLoad() {
			this.getdetail()
		}
	}
</script>

<style>
.search{
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
}
.txt{
	flex: 1;
	height: 90rpx;
	line-height: 90rpx;
}
.btn{
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
}
.songitem{
	/* border-bottom: 1rpx solid #C8C7CC; */
	margin-bottom: 20rpx;
	cursor: pointer;
}
.songitem .searchWord{
	font-size: 36rpx;
}
.songitem .content{
	font-size: 26rpx;
	color: #2C405A;
}
.searchhot .songitem{
	display: flex;
	justify-content: space-between;
	padding: 20rpx 20rpx 20rpx 20rpx;
}
.left{
	width: 20%;
	height: 100%;
}
.left .img{
	width: 100%;
	height: 80rpx;
	
}
.center{
	width: 60%;
}
.info{
	font-size: 26rpx;
	color: #555;
}
.right{
	float: right;
}
</style>
